<template>
  <div class="index" id="searchPolicy" @scroll.passive="getScroll($event)" style="overflow:auto;">
    <div class="topbanner">
      <div class="searchBtn" @click="togNav('/talentVue')">
        <i class="van-icon van-icon-search" style="color: rgb(153, 153, 153)"></i>
        <p>请输入关键词进行搜索</p>
      </div>
    </div>
    <!--topbanner-->
    <div class="contentBtn">
      <div class="iconBtn" @click="togNav('/chooseProject')">
        <div class="support"></div>
        <p>扶持政策匹配</p>
      </div>
      <div class="iconBtn" @click="togNav('/chooseEducation1')">
        <div class="education"></div>
        <p>身份学历匹配</p>
      </div>
      <div class="iconBtn" @click="togNav('/chooseEducation2')">
        <div class="area"></div>
        <p>企业政策匹配</p>
      </div>
    </div>

    <div class="graySolid"></div>
    <!--contentBtn-->
    <div role="feed" class="van-list">
      <div class="policyListli" v-for="(item,i) in list" :key="i" @click="togNav('/policyDetails?id='+item.id)">
        <p class="listTitle">
          {{item.title}}
        </p>
        <!-- <p class="cityName">成都市</p> -->
        <p class="listTime">{{item.updateTime1}}</p>
      </div>
      <p class="toBottom" v-if="loading">加载中..</p>
      <p class="toBottom" v-if="!finished">-----------  已经到底了  -----------</p>
    </div>
    <!--van-list-->
  </div>
</template>
<script>
import {findAllList} from '@/api/service/service'
export default {
  name: "policymobile",
  data: function () {
    return {
      search: "",
      req: {
        limit: 6,
        page: 1,
        keywords:""
      },
      list:[],
      loading: false, // 滚动加载中
      finished: true, // 滚动加载完成
    };
  },
  mounted() {
    let _this = this;
    _this.findRecommendPolicyListApi()
    
    window.onscroll = function(){
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop+windowHeight == scrollHeight){
        //到了这个就可以进行业务逻辑加载后台数据了
          // _this.footerText = '我是有底线的';
          _this.req.page = _this.req.page+1
          _this.findRecommendPolicyListApi()
        } 
      }
  },
  watch: {},

  methods: {
    togNav(e){
        this.$router.push(e)
    },
    findRecommendPolicyListApi(){
      if(this.finished){
        this.loading =true;
        findAllList(this.req).then(res=>{
            this.loading =false;
            if(res.code === 0){
                if(res.data.length < this.req.limit){
                  this.finished = false;
                }
                for(let i=0; i<res.data.length; i++){
                    res.data[i].updateTime1 = this.renderTime(res.data[i].createTime)
                }
                this.total = res.total;
                // this.list = res.data;
                this.list = this.list.concat(res.data);
                console.log(this.list)
            }
        })
      }
    },
    renderTime(date) {
      let datea = date.split(/[- : \/]/)
      console.log(datea[0]+datea[1]+datea[2])
      // date = new Date(datea[0]+datea[1]+datea[2] + '+08:00') // 兼容safari
      // console.log(date)
      // var o = {
      //   'M+': date.getMonth() + 1,
      //   'd+': date.getDate(),
      //   'h+': date.getHours(),
      //   'm+': date.getMinutes(),
      //   's+': date.getSeconds(),
      //   'q+': Math.floor((date.getMonth() + 3) / 3),
      //   'S': date.getMilliseconds()
      // }
      // if (/(y+)/.test(fmt)) {
      //   fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      // }
      // for (var k in o) {
      //   if (new RegExp('(' + k + ')').test(fmt)) {
      //     fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      //   }
      // }
      return datea[0]+'年'+datea[1]+'月'+datea[2].slice(0,2)+"日"
    },
    getScroll(event){
      console.log(e)
    }
  },
};
</script>
<style scoped>
.index {
  background: #fff;
}
#searchPolicy .searchBtn, #searchPolicy .topbanner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
#searchPolicy .topbanner {
    width: 100%;
    height: 190px;
    position: relative;
    background: pink;
    background: url(../../assets/policy/bannerindex.png) no-repeat;
    background-size: 100% 100%;
}
#searchPolicy .searchBtn {
    position: absolute;
    top: 15px;
    left: 10%;
    width: 80%;
    height: 36px;
    background: #fff;
    border-radius: 20px;
    opacity: .9;
}
#searchPolicy .graySolid {
    width: 100%;
    height: 16px;
    background: #eee;
}
.van-icon {
    position: relative;
    font: 14px/1 vant-icon;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.van-icon, .van-icon:before {
    display: inline-block;
}
.van-icon, .van-icon:before {
    display: inline-block;
}
.van-icon-search:before {
    content: "\F0AF";
}
#searchPolicy .searchBtn p {
    font-size: 14px;
    color: #aaa;
    margin-left: 10px;
}
#searchPolicy .contentBtn {
    width: 100%;
    height: 120px;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    box-sizing: border-box;
    box-shadow: 1px 2px 1px rgba(0,0,0,.15);
    z-index: 5;
    position: relative;
}
#searchPolicy .contentBtn, #searchPolicy .iconBtn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
#searchPolicy .iconBtn {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
}
#searchPolicy .iconBtn div {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    margin-bottom: 8px;
}
#searchPolicy .iconBtn .support{
    background:  url(../../assets/policy/policy1.png) center center no-repeat;
    background-size: 100% 100%;
}
#searchPolicy .iconBtn .education{
    background:  url(../../assets/policy/policy2.png) center center no-repeat;
    background-size: 100% 100%;
}
#searchPolicy .iconBtn .area{
    background:  url(../../assets/policy/policy3.png) center center no-repeat;
    background-size: 100% 100%;
}
#searchPolicy .policyListli {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-right: 100px;
}
#searchPolicy .listTitle {
    font-size: 14px;
    color: #333;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#searchPolicy .cityName {
    padding: 3px 10px;
    border-radius: 10px;
    text-align: center;
    color: #ccc;
    border: 1px solid #ccc;
    margin-left: 10px;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap;
}
#searchPolicy .listTime {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 15px;
}
#searchPolicy .toBottom {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: #bbb;
    text-align: center;
    word-wrap: normal;
    white-space: normal;
    letter-spacing: 2px;
}
</style>
